<template>
	<view class="wp">
		<view class="status">支付成功</view>
		<view class="shop">
			<image :src="info.logo" mode=""></image>
			<view class="name">{{info.supname}}</view>
			<button size="mini" @click="phoneCall(info.principalmobile)">联系商家</button>
		</view>
		<view class="order">
			<view class="list_item">
				<view class="title">订单号:</view>
				<view class="content">
					<text>{{info.ordersn}}</text>
					<button size="mini" @click="copy(info.ordersn)">复制</button>
				</view>
			</view>
			<view class="list_item">
				<view class="title">账单消费金额:</view>
				<view class="content">
					<text>{{info.goodsprice}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">支付身份:</view>
				<view class="content">
					<text>{{info.isvip}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">享受折扣:</view>
				<view class="content">
					<text>{{info.vipdisconut}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">优惠金额:</view>
				<view class="content">
					<text>-{{info.vipdisconutprice}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">实付金额:</view>
				<view class="content">
					<text class="text_color">{{info.price}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">支付类型:</view>
				<view class="content">
					<text>{{info.paytype}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">付款时间:</view>
				<view class="content">
					<text>{{info.paytime}}</text>
				</view>
			</view>
			<view class="list_item" v-if="info.status==3">
				<view class="title">核销状态:</view>
				<view class="content">
					<text>已核销</text>
				</view>
			</view>
			<view class="list_item" v-if="info.status==3">
				<view class="title">核销时间:</view>
				<view class="content">
					<text>{{info.checktime}}</text>
				</view>
			</view>
		</view>
		<view class="he_xiao" v-if="info.status!=3">
			<image @longtap="saveImage" :src="info.checkthumb" mode=""></image>
		</view>
		<view class="buttons">
			<button class="text_color" size="mini" @click="phoneCall(info.tsmobile)">投诉电话</button>
			<!-- <button size="mini" @click="areaShow=true">协商全额退款</button> -->
		</view>
		<!-- <modal v-if="areaShow" title="退款原因" confirm-text="提交" cancel-text="取消" @cancel="cancelAdd"
			@confirm="confirmAdd">
			<input type="text" v-model="areaTxt" placeholder="请填写申请原因" class="intxt" />
		</modal> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {
					goodsprice: "",
					isvip: "",
					logo: "",
					ordersn: "",
					paytime: "",
					paytype: "",
					price: "",
					principalmobile: "",
					supname: "",
					tsmobile: '',
					vipdisconut: '',
					vipdisconutprice: 0,
					checktime:'',
					checkthumb:'',
					status:'',
				},
				areaShow: false,
				areaTxt: '',
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getIno();
		},
		methods: {
			saveImage() {
				var that = this;
				uni.showModal({
					title: '保存',
					content: '保存核销码？',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.info.checkthumb,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								}
							});
						}
					}
				});
			},
			getIno() {
				this.$axios('transLog/transDetail', "POST", 'bonus', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			copy(v) {
				uni.setClipboardData({
					data: v
				})
			},
			phoneCall(v) {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: v, //仅为示例
					fail(e) {
						that.$api.msg(e);
					}
				});
			},
			cancelAdd() {
				this.areaShow = false;
			},
			confirmAdd() {
				this.areaShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wp {
		padding-bottom: 110upx;
	}

	.status {
		background: $bg-color;
		color: #fff;
		font-size: 38upx;
		line-height: 90upx;
		letter-spacing: 2px;
		text-align: center;
		transform: scaleY(1.2);
	}

	.shop {
		padding: 35upx 0 20upx;
		text-align: center;

		image {
			border-radius: 20upx;
			height: 150upx;
			width: 150upx;
		}

		.name {
			color: #000;
			font-size: 30upx;
			font-weight: 500;
			padding: 20upx;
			letter-spacing: 1px;
			transform: scaleY(1.2);
		}

		button {
			color: $bg-color;
			letter-spacing: 1px;
		}
	}

	.order {
		border-top: 1px #d3d3d3 solid;
		line-height: 65upx;
		font-size: 32upx;
		padding: 20upx;

		.list_item,
		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				padding-right: 20upx;
			}

			.content {
				justify-content: right;

				text {
					margin-right: 20upx;
				}
			}
		}
	}

	.text_color {
		color: $bg-color;
	}

	.he_xiao {
		padding: 20upx;
		text-align: center;

		image {
			border-radius: 20upx;
			height: 300upx;
			width: 300upx;
		}
	}

	.buttons {
		background: #fff;
		display: flex;
		height: 110upx;
		position: fixed;
		left: 0;
		bottom: 0;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		z-index: 100;

		button {
			margin: 0 20upx;
			letter-spacing: 1px;
		}
	}
</style>